<script setup lang="ts">
import * as echarts from "echarts";

const radar = ref();

function init() {
  var myChart = echarts.init(radar.value);

  var data = [80, 70, 30, 85, 25];
  var indicatorname = ["HTML", "CSS", "JavaScript", "Vue.js", "React.js"];
  var maxdata = [100, 100, 100, 100, 100];

  function contains(arrays, obj) {
    var i = arrays.length;
    while (i--) {
      if (arrays[i] === obj) {
        return i;
      }
    }
    return false;
  }

  var indicator = [];
  for (var i = 0; i < indicatorname.length; i++) {
    indicator.push({
      name: indicatorname[i],
      max: maxdata[i],
    });
  }

  function innerdata(i) {
    var innerdata = [];
    for (let j = 0; j < data.length; j++) {
      innerdata.push(100 - 20 * i);
    }
    return innerdata;
  }

  const optionData = getData(data);

  function getData(data) {
    var res = {
      series: [
        {
          type: "radar",
          symbolSize: 10,
          symbol: "circle",
          areaStyle: {
            color: "#39B2FF",
            opacity: 0.3,
          },
          lineStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#00A2FF",
                },
                {
                  offset: 1,
                  color: "#0060FF",
                },
              ],
              false
            ),
            width: 3,
          },
          itemStyle: {
            color: "#fff ",
            borderColor: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#00DEFF",
                },
                {
                  offset: 1,
                  color: "#1598FF",
                },
              ],
              false
            ),
            borderWidth: 4,
            opacity: 1,
          },
          label: {
            show: false,
          },
          data: [
            {
              value: data,
            },
          ],
          z: 100,
        },
      ],
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        type: "radar",
        data: [
          {
            value: innerdata(i),
          },
        ],
        symbol: "none",
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: "#fff",
        },
        areaStyle: {
          color: "#fff",
          shadowColor: "rgba(14,122,191,0.15)",
          shadowBlur: 30,
          shadowOffsetY: 20,
        },
      });
    }
    return res;
  }

  const option = {
    backgroundColor: "#fff",
    tooltip: {
      formatter: function () {
        var html = "";
        for (var i = 0; i < data.length; i++) {
          html += indicatorname[i] + " : " + data[i] + "%<br>";
        }
        return html;
      },
    },
    radar: {
      indicator: indicator,
      splitArea: {
        show: true,
        areaStyle: {
          color: "#fff",
          shadowColor: "rgba(14,122,191,0.19)",
          shadowBlur: 30,
          shadowOffsetY: 20,
        },
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      name: {
        textStyle: {
          rich: {
            a: {
              fontSize: "17",
              color: "#333",
              align: "left",
              lineHeight: "30",
              fontWeight: "bold",
            },
            b: {
              fontSize: "15",
              color: "#666",
              align: "left",
            },
          },
        },

        formatter: function (params, index) {
          var i = contains(indicatorname, params);
          var percent = (data[i] / 100) * 100;
          return "{a|" + percent + "%}\n" + "{b|" + params + "}";
        },
      },
    },
    series: optionData.series,
  };

  option && myChart.setOption(option);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

onMounted(() => {
  init();
});
</script>

<template>
  <div id="radar" ref="radar"></div>
</template>

<style scoped lang="less">
#radar {
  width: 45%;
  height: 500px;

  &::before {
    content: "分类统计";
    position: relative;
    top: -30px;
    left: 30%;
    color: @color;
  }
}
</style>
